import React, { useState } from 'react'
import './index.css'
export default function Item({ name, done, id, todoList, setTodoList }) {
  //鼠标移入移出事件函数，通过改变className来修改背景颜色样式
  const [isActive, setIsActive] = useState(false)
  const isActiveHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }
  //多选框触发的事件函数
  const checkChangeHandle = (e) => {
    // console.log(e.target.checked); 默认选中为true
    //遍历旧的数租，将id一致的那个多选框的状态改变
    const newTodoList = todoList.map(item => {
      //将两个id比较
      if (item.id === id) {
        /*1.然后改变id一样的属性的状态
         item.done=e.target.checked;*/
        //改变数据最好不好改变原数据，这是程序员的约定，所以返回一个新对象更规范
        return { ...item, done: e.target.checked }
      }
      //1.将item返回
      return item
    })
    //将改变后的数租传入setTodoList，重新渲染
    setTodoList(newTodoList)
  }
  //删除的事件回调函数
  const deleteHandle = () => {
    //filter方法通过返回的布尔值来筛选数组，为false取反表示删除的不是这个并返回，id一样表示要删除的就是这个，取反为false，过滤掉该项
    const newTodoList =todoList.filter(item=>item.id!==id)
    setTodoList(newTodoList)
  }
  return (
    <li
      onMouseEnter={isActiveHandle(true)}
      onMouseLeave={isActiveHandle(false)}
      className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{name}</span>
      </label>
      <button className="btn btn-danger"
        style={{ display: isActive ? 'block' : 'none' }}
        onClick={deleteHandle}

      >删除</button>
    </li>
  )
}
